import { useState,useEffect } from "react";
import {getUserMenu,getAllMenu,createMenu} from "@/api/system/index";
import {resType} from "@/commonType";
import CTable from "@/components/commonTable";
import CDialog from "@/components/commonDialog";
import { Button,message } from "antd";
import type { TableColumnsType, TableProps } from 'antd';
type TablePagination<T extends object> = NonNullable<Exclude<TableProps<T>['pagination'], boolean>>;
type TablePaginationPosition<T extends object> = NonNullable<
  TablePagination<T>['position']
>[number];
type TableRowSelection<T extends object = object> = TableProps<T>['rowSelection'];
interface DataType {
    key: React.ReactNode;
    name: string;
    code: string;
    type: string;
    url: string;
    menuid: string;
    status: string;
    remarks: string;
    createTime:Date;
    updateTime: Date;
    children?: DataType[];
    searchable: boolean;
}


const columns = [
    {
        title:"菜单名称",
        dataIndex:"name",
        key:"name",
        searchable:true,
    },
    {
        title:"菜单编码",
        dataIndex:"code",
        key:"code",
    },
    {
        title:"菜单类型",
        dataIndex:"type",
        key:"type",
        render: (type:string) => {
            return <a>{type=='1'?'模块':'菜单'}</a>
        }

     },
    {
        title:"菜单url",
        dataIndex:"url",
        key:"url",
    },
    {
        title:"状态",
        dataIndex:"status",
        key:"status",
        render: (status:string) => {
            return <a>{status=='1'?'正常':'弃用'}</a>
        }
    },
    {
        title:"备注",
        dataIndex:"remarks",
        key:"remarks",
    },
    {
        title:"创建时间",
        dataIndex:"create_time",
        key:"create_time",
    },
    {
        title:"更新时间",
        dataIndex:"update_time",
        key:"update_time",
    },
    {
        title:"操作",
        dataIndex: "action",
        key: "action",
        render: (text:any, record:any) => {
            console.log(text,record);
            return  <>
                        <Button onClick={()=>{
                            editMenu(record);
                        }} type="primary" style={{marginRight:10}}>编辑</Button>
                        <Button onClick={()=>{
                            deleteMenu(record);
                        }} danger type="primary">删除</Button>
                    </>;
        },
    }
]



const editMenu = (record:DataType) => {
    console.log(record);
}

const deleteMenu = (record:DataType) => {
    console.log(record);
}

const rowSelection: TableRowSelection<DataType> = {
    onChange: (selectedRowKeys, selectedRows) => {
      console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
    },
    onSelect: (record, selected, selectedRows) => {
      console.log(record, selected, selectedRows);
    },
    onSelectAll: (selected, selectedRows, changeRows) => {
      console.log(selected, selectedRows, changeRows);
    },
  };

const Menu:React.FC = ()=>{
    const [menu,setMenu] = useState([]);
    const [checkStrictly, setCheckStrictly] = useState(false);
    const [queryData, setQueryData] = useState({name:""})
    const [page,setPage] = useState({pageNum:1,pageSize:10});
    const [dialogVisible, setDialogVisible] = useState(false);
    const [total,setTotal] = useState<number>(0);
    const [messageApi, contextHolder] = message.useMessage();
    const [dialogForm, setDialogForm] = useState({
        "name":"",
        "code":"",
        "type":"",
        "parentid":"",
        "url":"",
        "icon":"",
        "component":"",
        "remark":"",
        "status":"1"
    });
    const [options, setOptions] = useState<any[]>([
        {
            type: 'input',
            label: '菜单名称',
            name:"name",
            placeholder:"请输入菜单名称",
        },
        {
            type: 'select',
            label: '菜单类型',
            name:"type",
            placeholder:"请选择菜单类型",
            options:[
                {value:'1',label:'模块'},
                {value:'2',label:'菜单'}
            ],
        },
        {
            type: 'cascader',
            label: '父级菜单',
            name:"parentid",
            placeholder:"请输入父级菜单",
            options:[],
            searchable:true,
            fieldNames:{
                label: 'name',
                value: 'menuid'
            }
        },
        {
            type: 'input',
            label: '菜单编码',
            name:"code",
            placeholder:"请输入菜单编码",
        },
        {
            type: 'input',
            label: '菜单url',
            name:"url",
            placeholder:"请输入菜单url",
        },
        {
            type: 'input',
            label: '组件地址',
            name:"component",
            placeholder:"请输入组件地址",
        },
        {
            type: 'input',
            label: '备注',
            name:"remark",
            placeholder:"请输入备注",
        },
    ])

    const [bottom, setBottom] = useState<TablePaginationPosition<DataType>>('bottomRight');
    const getMenu = ()=>{
        getAllMenu(queryData).then((res:any)=>{
            console.log(res);
            setMenu(res.data);
            options[2].options = res.data;
            setOptions([...options]);
        })
    }
    const search = (res:any) => {
        if(res){
            queryData.name = res.name;
        }
        getMenu();
    }
    const addMenu = () => {
        
        setDialogVisible(true);
    }
    const submit = (form:any)=>{
        console.log(form,'form');
        createMenu(form).then((res:any)=>{
            if(res.code == 200) {
                messageApi.success(res.msg);
                getMenu();
            }

        })
        //setDialogVisible(false);
    }
    const cancelDialog = () => {
        setDialogVisible(false);
    }
    useEffect(()=>{
        getMenu();
      },[])
    return (
        <>
            <CTable
                dataSource={menu}
                columns={columns}
                pagination={false}
                role={["add","edit","delete"]}
                searchable={true}
                rowKey="menuid"
                search={(info)=>{search(info)}}
                add={()=>{addMenu()}}
            />
            <CDialog 
                title="新增菜单"
                onOk={(form)=>{submit(form)}}
                onCancel={()=>{cancelDialog()}}
                visible={dialogVisible}
                width={600}
                form={dialogForm}
                options={options}
            />
        </>
    )
}
export default Menu;